<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：5、条件渲染  v-show</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- v-show -->
	<div id="app">
		<h1 v-show="ok">Hello!</h1>
		<button @click="toggle">toggle</button>
	</div>

	<!-- v-if跟v-show的区别：
		v-show不管是否显示，使用了指令的标签都是存在于DOM中的，通过display这个属性来控制显示和隐藏，它是基于CSS的切换
		v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件

		在编译顺序上：
			v-show 从一开始就被编译和保留不管是否显示
			v-if 如果为假，则一开始不会编译，直到第一次编译时才开始编译

		在性能对比上：
			v-show 有更高的初始渲染消耗
			v-if 有更高的切换消耗

		综上所述，使用建议为：
			v-show 需要频繁切换
			v-if 运行条件不太可能改变
	 -->

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				ok: true
			},
			methods: {
				toggle: function(){
					this.ok = !this.ok
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->